<template>
  <div>
    <el-row
      type="flex"
      class="card hidden-xs-only"
      :style="{'height':card_height +'px','display': display}"
    >
      <span
        :style="{'top': card_height/2 + 'px','color':'white'}"
        style="width: 100%;text-align: center;position: fixed;"
      >
        There was an unexpected error (type=Not Found, status=404)
        <br />
        <br />No message available
      </span>
    </el-row>
  </div>
</template>

<script>
export default {
    name: "card",
  data() {
    return {
      minHeight: 0,
      navBarFixed: true,
      card_height: 700,
      display: "block"
    };
  },
  components: {},
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > this.minHeight / 2) {
        // this.navBarFixed = true;
        // this.display = 'none';
        window.console.log(scrollTop);
      } else if (scrollTop < 10) {
        // this.navBarFixed = true;
        // this.display = 'block';
        window.console.log(scrollTop);
      }
    }
  },
  mounted() {
    let that = this;
    that.minHeight = document.documentElement.clientHeight;
    that.card_height = document.documentElement.clientHeight;
    window.onresize = function() {
      that.minHeight = document.documentElement.clientHeight;
      that.card_height = document.documentElement.clientHeight;
    };
    window.addEventListener("scroll", this.watchScroll, true);
  }
};
</script>

<style>
</style>